<template>
  <el-card style="padding: 0px">
    <template #header>
      <div class="card-header">
        <span>成员管理页面</span>
      </div>
    </template>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="#" width="60" />
      <el-table-column prop="mname" label="姓名" width="100" />
      <el-table-column prop="gender" label="性别" width="60" />
      <el-table-column prop="tel" label="电话" />
      <el-table-column prop="birthday" label="生日" />
      <el-table-column prop="roleid" label="角色" />
      <el-table-column prop="state" label="状态" />
      <!-- 自定义table列模板技术 
      label="状态" 表头 -->
      <el-table-column label="状态" width="180">
        <!-- 列模板内容 -->
        <!-- tr :  当前的表格行
          tr.row ：  表格行绑定的对象 
         :active-value="1"
            :inactive-value="0" ，默认是字符串
        -->
        <template #default="tr">
          <el-switch
            inline-prompt
            @click="statechange(tr.row)"
            v-model="tr.row.state"
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
            :active-value="1"
            :inactive-value="0"
            active-text="正常"
            inactive-text="禁用"
          />
        </template>
      </el-table-column>
    </el-table>

    <template #footer>Footer content</template>
  </el-card>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import $ajax from 'axios'

const tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  }
])

const loadrole = async () => {
  const instance = $ajax.create({
    baseURL: 'http://localhost:8020',
    timeout: 5000
  })

  try {
    // const response = await instance.get('/member/list')
    // const res = response.data
    const { data: res } = await instance.get('/member/list')
    if (res.code === 200) {
      tableData.value = res.result
    } else {
      console.log(res.msg)
    }
  } catch (error) {
    console.error(error)
  }
  console.log('loadrole')
}

const statechange = async (row) => {
  const instance = $ajax.create({
    baseURL: 'http://localhost:8020',
    timeout: 5000,
    // 以JSON格式向服务器发送数据
    headers: {
      'Content-Type': 'application/json'
    }
  })
  try {
    const { data: res } = await instance.put('/member/mod', row)
    console.log(res)
  } catch (error) {
    console.error(error)
  }
  console.log(row)
}

onMounted(() => {
  loadrole()
})
</script>
